<template>
	<view>
		<view class="UserGrid-box">
			<view class="UserGrid">
				<view class="Title" v-if="gridType==2">
					<view class="left-Tit">
						<text class="Tit-text">{{title}}</text>
					</view>
					<view class="right-icons" @click="itemTap" data-tap="gengduo">
						<!-- 查看更多 -->
						<!-- #ifndef APP-NVUE -->
						<u-icon name="qianjin" custom-prefix="custom-icon" size="24" color="#868990"></u-icon>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<view class="icons">
							<text class="open nvueiconfont" style="color:#868990;">&#xe643;</text>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="grid">
					<!-- (1)默认第一种样式，不带标题，icon是图片方式， -->
					<view v-if="gridType==1" class="grid-item one" 
					v-for="(item,index) in gridIconlist"
					:key="index"
					@click="itemTap"
					:data-tap="item.click"
					>
						<view class="Image-box">
							<image class="Image" :src="item.image" mode="widthFix"></image>
						</view>
						<view class="Tit">
							<text class="Tit-text">{{item.title}}</text>
						</view>
					</view>
					<!-- (2)第二种样式带标题，icon是icon字体图标 -->
					<view v-if="gridType==2" class="grid-item two" 
					v-for="(item,index) in gridIconlist"
					:key="index"
					@click="itemTap"
					:data-tap="item.click"
					>
						<view class="IconImage">
							<!-- icons图标 -->
							<!-- #ifndef APP-NVUE -->
							<u-icon :name="item.MPIconsName" custom-prefix="custom-icon" :size="IconsFontSize" :color="IconsColor"></u-icon>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<!-- NVUE下无法动态渲染字体图标 -->
							<view class="icons" v-if="item.AppIconsName=='&#xe60f;'">
								<text class="open nvueiconfont" :style="[{'color':IconsColor},{'font-size':IconsFontSize}]">&#xe60f;</text>
							</view>
							<view class="icons" v-if="item.AppIconsName=='&#xe60a;'">
								<text class="open nvueiconfont" :style="[{'color':IconsColor},{'font-size':IconsFontSize}]">&#xe60a;</text>
							</view>
							<!-- #endif -->
						</view>
						<view class="Tit">
							<text class="Tit-text">{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"UserGrid",
		props:{
			// grid宫格数据
			gridIconlist:{
				type:Array,
				default:[]
			},
			// grid宫格排版样式类型
			gridType:{
				type:Number,
				default:1 //(1)默认第一种样式，不带标题，icon是图片方式，(2)第二种样式带标题，icon是icon字体图标
			},
			// grid功能顶部Header标题栏标题
			title:{
				type:String,
				default:''
			},
			// （icon字体图标的颜色）启用宫格类型2时，可选填
			IconsColor:{
				type:String,
				default:'#1b9df6'
			},
			// （icon字体图标的大小）启用宫格类型2时，可选填
			IconsFontSize:{
				type:String,
				default:'44rpx'
			}
		},
		data() {
			return {
				// 测试数据--静态数据已迁移至/assets/js/UserGrid/Data.js
				// // 个人中心icon图标[下载、历史...]
				// gridIconlist:[
				// 	{
				// 		image:'/static/FatFatMeng-apps/FatFatMeng-image/FatFatMeng-user/FatFatMeng-user-xiazai.png',
				// 		title:'离线缓存'
				// 	},
				// 	{
				// 		image:'/static/FatFatMeng-apps/FatFatMeng-image/FatFatMeng-user/FatFatMeng-user-lishijilu.png',
				// 		title:'观看历史'
				// 	},
				// 	{
				// 		image:'/static/FatFatMeng-apps/FatFatMeng-image/FatFatMeng-user/FatFatMeng-user-zhuiju.png',
				// 		title:'我的追剧'
				// 	},
				// 	{
				// 		image:'/static/FatFatMeng-apps/FatFatMeng-image/FatFatMeng-user/FatFatMeng-user-shoucang.png',
				// 		title:'我的收藏'
				// 	}
				// ],
				// gridIconlist2:[
				// 	{
				// 		MPIconsName:'fabu',//icon图标的名字
				// 		AppIconsName:'&#xe60f;',//icon图标的名字
				// 		title:'意见反馈',
				// 		click:''//点击的事件名
				// 	},
				// 	{
				// 		MPIconsName:'guanyuwomen1',//icon图标的名字
				// 		AppIconsName:'&#xe60a;;',//icon图标的名字
				// 		title:'关于我们',
				// 		click:''//点击的事件名
				// 	}
				// ]
			};
		},
		methods:{
			itemTap(e){
				//console.log(e)
				let itemTap = e.currentTarget.dataset.tap
				if (itemTap == 'gengduo') {
					uni.showToast({
						title:'暂无更多',
						icon:'none'
					})
				}else {
					this.$emit('change',itemTap)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './UserGrid.scss';
</style>
